.markdown-container {
  width: 100%;
  height: 100%;
  flex: 2;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  background: #eee;
  animation: show 1s ease-in-out;
  header {
    width: 100%;
    padding: 0.6em 30px;
    position: absolute;
    z-index: 1000;
  }
  .section {
    position: relative;
    text-align: left;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px;
    /*-webkit-border-radius: 2px;*/
    /*border-radius: 2px;*/
  }
  .content-container {
    min-height: 100%;
    margin-top: 3em;
  }
  .content {
    padding: 6.5em 1em 10em 1em;
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .markdown-input-section {
    background: #222;
    .markdown-input-container {
      background: #333633;
      width: 100%;
      height: 100%;
      max-width: 840px;
      margin: 0 auto;
      position: relative;
      header {
        .title {
          color: #20d6ff;
        }
      }
      .edit-text-area {
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: transparent;
        border: none;
        resize: none;
        font-size: 1em;
        line-height: 1.5em;
        box-shadow: none;
        box-sizing: inherit;
        color: #cde6f5;
        width: 100%;
        height: 100%;
        outline: solid #50757d 1px;
        padding-top: 7em;
      }
      .subject-input {
        font-size: 16px;
        top: 40px;
        position: absolute;
        width: 100%;
        color: white;
        border-bottom: dashed #ddd 1px;
        textarea {
          color: white;
          background: #00000000;
          border: none;
          outline: none;
          font-size: 1em;
          font-weight: bold;
          width: 100%;
          text-align: center;
          resize: none;
        }
      }
    }
  }
  .menu_group {
    display: inline;
    text-align: right;
    .menu_item {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      border: solid 1px #ffffff;
      outline: none;
      background: #bed5e2;
      color: white;
      padding: 4px 10px;
      border-radius: 3px;
      font-size: 1em;
    }
    .active {
      background: #1e6bb8;
    }
  }

  .right {
    float: right;
  }
  .html-preview-section {
    background: #fff;
    .html-preview-content {
      padding-top: 3.5em;
    }
    .copyright-info {
      display: none;
    }
  }
  .mail-container {
    min-height: 100vh;
    .content-container {
      background: #ffffff;
      max-width: 840px;
      width: 100%;
      min-height: calc(100vh - 60px);
      margin: 0 auto;
      box-shadow: 3px 5px 20px #b8dcec;
      border: 0.5px solid #d8e7f3;
      .content-header {
        width: 100%;
        min-height: 150px;
        position: relative;
        display: inline-flex;
        align-items: center;
        background-size: contain;
        .title {
          width: 100%;
          position: absolute;
          text-align: center;
          color: #022d48;
          padding: 30px 10px 10px 10px;;
          word-wrap: break-word;
          word-break: normal;
          font-size: 0.9em;
          .sub-title {
            font-size: 2em;
            line-height: 1.2em;
            font-weight: bold;
          }
        }
      }
      .content-body {
        padding: 3.5em 2em;
        h1, h2, h3, h4, h5 {
          color: #125da1;
          margin-bottom: 1em;
        }
        li {
          font-weight: 500;
        }
      }

    }
    .copyright-info {
      display: block;
      max-width: 860px;
      margin: 0 auto;
      padding: 12px;
      font-size: 12px;
      text-align: right;
      font-style: italic;
    }
  }
}
@-webkit-keyframes show
{
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:1;}
}